<template>
    <div class="vfathertoson">
        <h2>父传子</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            父组件向子组件传递数据。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">使用步骤</el-tag>
        <p class="decr">
            1. 将子组件引入到父组件<br>
            2. 在父组件中使用子组件<br>
            3. 在子组件标签上绑定数据。<br>
            4. 在子组件中，用props接收数据。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            1. 传递字符串， 把字符串"hello666"已参数hello的形式传递给子组件<br>
            {{trans1}}<br>
            得到结果：<br>
            <VfathertosonSon1 hello="hello666"></VfathertosonSon1>
        </p>
        <p class="decr">
            2. 传递数字、数组、对象。注意，这时候是需要用v-bind绑定数据的。<br>
            {{trans2}}<br>
            得到结果：<br>
            <VfathertosonSon1 :num="233" :arr="['hi', 'world']" :obj="{a: '你好啊'}"></VfathertosonSon1>
        </p>
        <p class="decr">
            3. 传递方法名，注意此时也是需要动态绑定的。<br>
            {{trans3}}<br>
            得到结果：<br>
            <VfathertosonSon1 :getFn="getFn"></VfathertosonSon1>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VfathertosonSon1 from './VfathertosonSon1';

export default {
    name: 'Vfathertoson',
    mixins: [mixinPage],
    components: {VfathertosonSon1},
    data() {
        return {
            trans1: `<VfathertosonSon1 hello="hello666"></VfathertosonSon1>`,
            trans2: `<VfathertosonSon1 :num="233" :arr="['hi', 'world']" :obj="{a: '你好啊'}"></VfathertosonSon1>`,
            trans3: `<VfathertosonSon1 :getFn="getFn"></VfathertosonSon1>`,
        }
    },
    methods: {
        getFn() {
            console.log('得到getFn');
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>